<style lang="less">
    @import './index.less';
</style>

<template>
  <div>
    <Card dis-hover>
      <Table :columns="columns1" :data="data1"></Table>
    </Card>
    <Modal v-model="addModal" title="添加可确认收入计划" width="1000">
      <Form :model="createReceivableForm" :label-width="80">
        <div class="division-tips">
          <span>
            <Button size="small" type="text" icon="arrow-down-b"></Button>
            合同信息
          </span>
        </div>
        <Row :gutter="10">
          <i-col span="8">
            <FormItem label="合同编号">
                <Input v-model="contractMes.contract_num"></Input>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="合同名称">
                <Input v-model="contractMes.company"></Input>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="合同金额">
                <Input v-model="contractMes.money"></Input>
            </FormItem>
          </i-col>
        </Row>
        <div class="division-tips">
          <span>
            <Button size="small" type="text" icon="arrow-down-b"></Button>
            可确认收入信息
          </span>
        </div>
        <Row :gutter="10" v-for="(item,index) in createReceivableForm.receivableList" :key="index">
          <i-col span="8">
            <FormItem label="年份">
              <Select v-model="item.year">
                <Option value="2017">2017</Option>
                <Option value="2018">2018</Option>
                <Option value="2019">2019</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="月份">
                <Select v-model="item.month">
                  <Option value="1">1</Option>
                  <Option value="2">2</Option>
                  <Option value="3">3</Option>
                  <Option value="4">4</Option>
                  <Option value="5">5</Option>
                  <Option value="6">6</Option>
                  <Option value="7">7</Option>
                  <Option value="8">8</Option>
                  <Option value="9">9</Option>
                  <Option value="10">10</Option>
                  <Option value="11">11</Option>
                  <Option value="12">12</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="金额">
                <Input v-model="item.money"></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="4" offset="4">
            <Button type="dashed" icon="plus" @click="addReceivable">添加可确认收入计划</Button>
          </i-col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addModal:false,
      contractMes:{},
      createReceivableForm:{
        receivableList:[{}]
      },
      columns1: [
        {
          title:'序号',
          type:'index',
          align:'center'
        },{
          title:'合同编号',
          align:'center',
          key:'contract_num'
        },{
          title:'客户',
          align:'center',
          key:'company'
        },{
          title:'合同金额(元)',
          align:'center',
          key:'money'
        },{
          title:'操作',
          align:'center',
          key:'action',
          render: (h,params) => {
            return h('div', [
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '详细信息'
                  }
                }, [h('Button', {
                  props: {
                    size: 'small',
                    icon: 'qr-scanner',
                    type: 'text'
                  },
                  on: {
                    click: () => {}
                  }
                })]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '提交可确认收入计划'
                  }
                }, [h('Button', {
                  props: {
                    size: 'small',
                    icon: 'settings',
                    type: 'text'
                  },
                  on: {
                    click: () => {
                      this.handelReceivable(params.row);
                    }
                  }
                }
                )])
              ]);
          }
        }
      ],
      data1:[
        {
          contract_num:'AVC-0001',
          company:'北京奥维云网科技股份有限公司',
          money:'200',
        }
      ]
    }
  },
  methods:{
    handelReceivable(mes) {
      this.contractMes = mes
      this.addModal = true
    },
    addReceivable() {
      this.createReceivableForm.receivableList.push(
        {
          year:'',
          month:'',
          money:''
        }
      )
    }
  },
  mounted() {

  }
}
</script>

